<template>
  <div>
    <v-top></v-top>
    <div class="liebiao">
      <div class="top">
        <div>
          <input type="text" placeholder="按内容搜索" />
        </div>
        <ul>
          <li>综合推荐<span></span></li>
          <li>销量<span></span></li>
          <li>价格<span></span></li>
          <li>好评度<span></span></li>
          <li>店铺<span></span></li>
          <li><img src="../../assets/img/页面-3-商品列表_03.gif" alt class="shaixuan" /> 筛选</li>
        </ul>
      </div>
      <div class="nav">
        <div class="box0">
          <input type="button" value="筛选双11.11大促商品" class="inp1" />
        </div>
        <br />
        <router-link v-for="(item) in arr" :key="item.id" :to="'/detail/'+item.id">
          <div class="box">
            <img :src="'http://localhost:3000'+item.img" alt />
            <div class="box1">
              <p>{{item.goodsname}}</p>
              <p>
                <span>￥</span>
                {{item.price}}
                <del>{{"￥"+item.market_price}}</del>
              </p>
            </div>
            <br />
          </div>
        </router-link>
        <div v-if="arr.length==0">
          <h3>暂无数据</h3>
        </div>
      </div>
    </div>
    <div class="box2">
      <p></p>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import { reqList } from "../../http/api";
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    // console.log(this.$route.query.id);
    reqList({ cateid: this.$route.query.id,
          type:this.$route.query.type}).then((res) => {
      this.arr = res.data.list.goodData ? res.data.list.goodData : [];
    });
  },
  methods: {
    sendData(index) {
      this.EventBus.$emit("sendData", this.arr[index]);
      this.$router.push("/detail");
    },
  },
};
</script>

<style scoped>
.liebiao {
  margin: 0 auto;
}
.top {
  background: linear-gradient(to bottom, #ff6040, #ff8a7f);
}
.top p {
  font-size: 0.3rem;
  color: white;
  display: flex;
  justify-content: center;
  line-height: 1rem;
}
.top div {
  display: flex;
  justify-content: center;
}
.top input {
  width: 7.1rem;
  height: 0.65rem;
  background: #ffffff url(../../assets/img/页面-1-index_09.gif) no-repeat left;
  background-size: 0.32rem 0.32rem;
  background-position: 0.2rem 0.2rem;
  border-radius: 2px;
}
.liebiao ul {
  height: 0.5rem;
  display: flex;
  justify-content: space-around;
  font-size: 0.25rem;
  color: white;
}
.liebiao ul li {
  line-height: 0.48rem;
}
.liebiao ul li:nth-child(7) {
  display: flex;
  align-items: center;
}
.liebiao ul li span {
  display: block;
  background-color: white;
  width: 0.7rem;
  height: 2px;
  display: none;
}
.liebiao ul li:hover span {
  display: block;
  font-size: 0.3rem;
}
.liebiao ul li:hover {
  font-size: 0.3rem;
}
.shaixuan {
  width: 0.25rem;
  height: 0.25rem;
  display: inline-block;
  margin-top: 5px;
}
.inp1 {
  width: 7.1rem;
  height: 0.65rem;
  font-size: 0.3rem;
  color: #ff6040;
  text-align: center;
  font-weight: bold;
  background: #fff4f2;
  background-size: 0.32rem 0.32rem;
  background-position: 0.2rem 0.2rem;
  border-radius: 5px;
}
.nav {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border: 1px solid #ccc;
}
.box img {
  width: 2.16rem;
  height: 2.16rem;
}
.box0 {
  text-align: center;
}
.box1 {
  display: flex;
  flex-direction: column;
}
.box1 p:nth-child(1) {
  font-size: 0.3rem;
  letter-spacing: 1px;
  line-height: 0.35rem;
}
.box1 p:nth-child(2) {
  font-size: 0.3rem;
  color: #999999;
  line-height: 0.35rem;
}
.box1 p:nth-child(3) {
  font-size: 0.32rem;
  color: #ff6040;
  line-height: 0.6rem;
}
.box1 p:nth-child(3) span:nth-child(1) {
  font-size: 0.16rem;
  color: #ff6040;
}
.box1 p:nth-child(3) del:nth-child(2) {
  font-size: 0.16rem;
  color: #999999;
}
.box1 p:nth-child(3) span:nth-child(3) {
  font-size: 0.16rem;
  color: #999999;
}
.box1 p:nth-child(4) {
  width: 1.65rem;
  height: 0.33rem;
  background-color: #ff6040;
  font-size: 0.18rem;
  color: white;
  line-height: 0.3rem;
  letter-spacing: 1px;
}
.box1 p:nth-child(5) {
  font-size: 0.16rem;
  color: #999999;
  line-height: 0.4rem;
}
.box2 {
  margin: 10px auto;
  position: fixed;
  left: 3rem;
  top: 12.8rem;
}
.box2 p {
  width: 1.8rem;
  height: 0.1rem;
  background-color: black;
  border-radius: 5px;
  margin: 0 auto;
}
</style>